import {useState } from "react";
import './index.css'

const ProgressiveImage: React.FC<{
  src: string;
  placeholder?: string;
  alt?: string;
  className?: string;
  style?:any;
}> = ({ src, placeholder, alt, className,style }) => {
  const [loading, setLoading] = useState(true);

  return (
    <div 
      className={`image-container ${loading ? 'loading' : 'loaded'}`}
      style={{ backgroundImage: `url(${placeholder})` }}
    >
      <img
        src={src}
        alt={alt}
        className={`${className} ${loading ? 'opacity-0' : 'opacity-100'}`}
        onLoad={() => setLoading(false)}
        style={{
          ...style,
          transition: 'opacity 0.3s ease-in-out'
        }}
      />
    </div>
  );
};

export default ProgressiveImage;